<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="with=device-width,initial-scale=1.0,
      maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
    <title>vue-tree</title>
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bulma/0.4.2/css/bulma.min.css" rel="stylesheet">
    <style>
        html {
          min-height: 100%;
          background: linear-gradient(to bottom right, #00ebcb, #dafffa)
        }


        .container {
          background-color: #fff;
          border-radius: 5px;
          box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
          padding: 1.25rem;
          max-width: 1024px !important;
          background-color: #fff;
          margin: 1rem auto 0 auto;
        }

        .wrapper {
            min-height: 100vh;
            padding: 0 0.5rem;
        }

        @media screen and (min-width: 768px) {
            .control:not(:last-child) {
                margin-bottom: 0.2rem;
            }

            .is-full {
                flex: 1;
            }

            .is-horizontal {
                display: flex;
                align-items: center;
            }

            .label {
                margin-right: 1rem;
            }
        }



        @media all and (max-width: 375px) {
            .calendar-wrapper {
                width: 120%;
                max-width: 120%;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .vtl .vtl-drag-disabled, .vtl .vtl-drag-disabled:hover {
          background-color: #dbd7d7;
          position: relative;
        }

        .vtl .vtl-drag-disabled::after, .vtl .vtl-disabled::after {
          content: 'drag disabled';
          position: absolute;
          right: 10px;
          font-size: 12px;
          font-style: italic;
        }

        .vtl .vtl-disabled, .vtl .vtl-disabled:hover {
          background-color: red;
          position: relative;
        }

        .vtl .vtl-disabled::after {
          content: 'disabled';
        }
    </style>
</head>
<body>
<div id="app" :style="`padding-top: ${isMobile ? 0.5 : 3}rem;`" class="wrapper is-fullwidth">
    <a href="https://github.com/ParadeTo/vue-tree">
        <h1 class="has-text-centered title is-1" v-if="!isMobile" style="margin-bottom: 0.5rem;">
            <img style="width: 3rem; vertical-align: middle;"
                 src=""
                 alt="">
            vue-tree
        </h1>
    </a>
    <div class="container">
        <button class="button is-primary is-small" @click="addNode">
            <span class="icon is-small" style="margin-right: 2px;">
                <i class="fa fa-plus-circle"></i>
            </span>
            New Treenode
        </button>
        <vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
    </div>

    <div class="container">
      <div class="has-text-centered" style="margin-bottom: 1rem">
        <button class="button is-primary" type="button" name="button" @click="getNewTree">Get New Tree</button>
      </div>
      <pre>
        {{newTree}}
      </pre>
    </div>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../dist/vue-tree-list.min.js"></script>
<script>
  function isMobile() {
    var sUserAgent = navigator.userAgent.toLowerCase();

    var bIsIpad = /ipad/i.test(sUserAgent);
    var bIsIphoneOs = /iphone os/i.test(sUserAgent);
    var bIsMidp = /midp/i.test(sUserAgent);
    var bIsUc7 = /rv:1.2.3.4/i.test(sUserAgent);
    var bIsUc = /ucweb/i.test(sUserAgent);
    var bIsAndroid = /android/i.test(sUserAgent);
    var bIsCE = /windows ce/i.test(sUserAgent);
    var bIsWM = /windows mobile/i.test(sUserAgent);
    var bIsWx = /MicroMessenger/i.test(sUserAgent);
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM || bIsWx) {
      return true;
    }
    return false;
  }

  new Vue({
    el: '#app',
    components: {
      'VueTreeList': VueTreeList.VueTreeList
    },
    data () {
      return {
        isMobile: isMobile(),
        record: null,
        newTree: {},
        data: new VueTreeList.Tree([
          {
            name: 'Node 1',
            id: 1,
            pid: 0,
            dragDisabled: true,
            children: [
              {
                name: 'Node 1-2',
                id: 2,
                isLeaf: true,
                pid: 1
              }
            ]
          },
          {
            name: 'Node 2',
            id: 3,
            pid: 0,
            disabled: true
          },
          {
            name: 'Node 3',
            id: 4,
            pid: 0
          }
        ])
      }
    },
    methods: {
      getTreeChange: function () {
        this.record = Object.assign({}, VueTreeList.Record)
      },

      addNode: function () {
        var node = new VueTreeList.TreeNode({ name: 'new node', isLeaf: false })
        if (!this.data.children) this.data.children = []
        this.data.addChildren(node)
      },

      getNewTree: function () {
        var vm = this
        function _dfs (oldNode) {
          var newNode = {}

          for (var k in oldNode) {
            if (k !== 'children' && k !== 'parent') {
              newNode[k] = oldNode[k]
            }
          }

          if (oldNode.children && oldNode.children.length > 0) {
            newNode.children = []
            for (var i = 0, len = oldNode.children.length; i < len; i++) {
              newNode.children.push(_dfs(oldNode.children[i]))
            }
          }
          return newNode
        }

        vm.newTree = _dfs(vm.data)
      },

      onClick(model) {
        console.log(model)
      }
    }
  })
</script>
</body>
</html>
